<template>
    <el-container class="content">
        <el-header :height="'auto'">
            <breadcrumb :title="'卡口二维码管理'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="bayonetName" placeholder="卡口名称" class="input" size="small"></el-input>
                            <el-button class="primary" @click="getList(1)" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                            <el-button @click="dataExport()" size="small">导出</el-button>
                        </div>
                        <div class="text-right">
                            <el-button type="primary" @click="sevaOne()" size="small">新增
                            </el-button>
                        </div>
                    </div>
                </el-header>

                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   :stripe="true">
                        <template slot="state" slot-scope="scope">
                            <span v-if="scope.row.state==0" class="error">禁用</span>
                            <span v-if="scope.row.state==1" style="color: green">启用</span>
                        </template>

                        <template slot="qrcodeUrl" slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="onPreview(scope.row)">查看</el-link>
                        </template>

                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" @click="approval(scope.row, 2)">修改
                                </el-link>
                                <el-link type="primary" :underline="false" @click="approval(scope.row, 1)">删除
                                </el-link>
                                <el-link type="primary" :underline="false" @click="approval(scope.row, 3)"
                                         v-if="scope.row.state==1">禁用
                                </el-link>
                                <el-link type="primary" :underline="false" @click="approval(scope.row, 3)"
                                         v-else-if="scope.row.state==0">启用
                                </el-link>
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <!-- 打开 二维码-->
            <dialog-msk :show.sync="showCode" ref="codeDialog" :title="'二维码'" :width="'450px'">
                <!--                        @save="saveDialog" @cancel="closeDialog">-->
                <div class="code-img">
                    <el-image fit="contain" :src="'/_api'+currentList.qrpicturePath" v-if="currentList">
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div slot="footer" class="center">
                    <slot name="footer">
                        <el-button type="primary" @click="dowDialog" size="small">下载</el-button>
                        <el-button @click="closeCodeDialog" size="small">取消</el-button>
                    </slot>
                </div>
            </dialog-msk>

            <!--新增/修改弹出框-->

            <dialog-msk :show.sync="showEdit" ref="explainEdit" :title="title" :width="'500px'"
                        @save="saveDialog" @cancel="closeDialog">
                <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm"
                         size="small" label-width="130px" :label-position="'left'">
                    <el-form-item label="楼宇" prop="building">
                        <el-select v-model="ruleForm.building" placeholder="请选择楼宇"
                                   @change="getFloor"
                                   class="full"
                                   size="small">
                            <el-option
                                v-for="(item, index) in buildingList"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼层" prop="floor">
                        <el-select v-model="ruleForm.floor" placeholder="请选择楼层" @change="getDepartment" class="full"
                                   size="small">
                            <el-option
                                v-for="(item, index) in floorList"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="科室" prop="department">
                        <el-select v-model="ruleForm.department" placeholder="请选择科室" class="full" size="small">
                            <el-option
                                v-for="(item, index) in departmentList"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="卡口名称" prop="bayonetName">
                        <el-input v-model="ruleForm.bayonetName" size="small" placeholder="请输入卡口名称"></el-input>
                    </el-form-item>
                    <el-form-item label="卡口负责人" prop="bayonetLeader">
                        <el-input v-model="ruleForm.bayonetLeader" size="small" placeholder="请输入卡口负责人"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人联系方式" prop="phone">
                        <el-input v-model="ruleForm.phone" size="small" placeholder="请输入负责人联系方式"></el-input>
                    </el-form-item>
                </el-form>
            </dialog-msk>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import dialogMsk from '../components/dialog'
    import breadcrumb from '../components/breadcrumb'
    import qs from 'qs'

    export default {
        data() {
            return {
                showCode: false,
                bayonetName: '', // 卡口名称
                tableData: [],
                header: [
                    {
                        prop: 'bayonetName',
                        label: '卡口名称',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'buildingStr',
                        label: '楼宇',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'floorStr',
                        label: '楼层',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'departmentStr',
                        label: '科室',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'bayonetLeader',
                        label: '卡口负责人',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '卡口负责人联系方式',
                        minWidth: '200',
                        align: 'center'
                    },
                    {
                        prop: 'state',
                        label: '状态',
                        align: 'center',
                        minWidth: '100'
                    },
                    {
                        prop: 'qrcodeUrl',
                        label: '二维码',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '100',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['qrcodeUrl', 'state', 'operation'],
                page: {},
                index: 1,
                loading: false,
                showEdit: false,
                // 自定义弹出框名
                title: '',
                currentList: null,
                ruleForm: {
                    building: null,
                    floor: null,
                    department: null,
                    bayonetName: '',
                    bayonetLeader: '',
                    phone: ''
                },
                rules: {
                    building: [
                        {required: true, message: '请选择楼宇', trigger: 'change'}
                    ],
                    floor: [
                        {required: true, message: '请选择楼层', trigger: 'change'}
                    ],
                    department: [
                        {required: true, message: '请选择科室', trigger: 'change'}
                    ],
                    bayonetName: [
                        {required: true, message: '请填写卡口名称', trigger: 'blur'}
                    ],
                    bayonetLeader: [
                        {required: true, message: '请填写卡口负责人', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请填写卡口负责人联系方式', trigger: 'blur'}
                    ]
                },
                buildingList: [],
                departmentList: [],
                floorList: []
            }
        },
        mounted() {
            this.getBuilding()
            this.getList()
        },
        methods: {
            onPreview(row) {
                this.currentList = row
                this.showCode = true
            },
            // 下载二维码
            dowDialog() {
                let params = {
                    id: this.currentList.id
                }, url = '/_api/bayonetManage/downloadImage'
                url += '?' + qs.stringify(params)
                window.open(location.origin + url, '_blank')
            },
            // 获取下拉框
            getBuilding() {
                this.$http.get('/buildingManage/getBuilding').then(result => {
                    if (result.success) {
                        this.buildingList = result.data
                    }
                })
            },
            // 获取层数据
            getFloor(buildingId, callback) {
                this.ruleForm.floor = null
                this.ruleForm.department = null
                this.$http.get('/buildingManage/getFloor?id=' + buildingId).then(result => {
                    if (result.success) {
                        this.floorList = result.data
                        if (callback) callback()
                    }
                })
            },

            getDepartment(buildingId, callback) {
                this.ruleForm.department = null
                this.$http.get('/buildingManage/getFloor?id=' + buildingId).then(result => {
                    if (result.success) {
                        this.departmentList = result.data
                        if (callback) callback()
                    }
                })
            },
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/bayonetManage/bayonetPage', {
                    bayonetName: this.bayonetName,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // Excel 导出
            dataExport() {
                let params = {
                    bayonetName: this.bayonetName
                }, url = '/_api/bayonetManage/downloadBayonetManage'
                url += '?' + qs.stringify(params)
                window.open(location.origin + url, '_blank')
            },
            // 新增数据 更改改变模态框的title
            sevaOne() {
                this.currentList = null
                this.floorList = null
                this.departmentList = null
                this.title = '添加卡口信息'
                this.showEdit = true
            },
            // 重置操作
            reset() {
                this.bayonetName = ''
                this.getList(1)
            },
            // 修改 删除
            approval(row, type) {
                let _this = this
                if (type === 1) {
                    this.$method.messageBox('confirm', '是否删除该卡口', (action, instance) => {
                        if (action === 'confirm') {
                            _this.$http.post('/bayonetManage/deleteOne?id=' + row.id).then(result => {
                                _this.getList()
                                this.$message.success({
                                    message: '删除卡口信息成功',
                                    showClose: true
                                })
                            })
                        }
                    }, '', false, false)
                } else if (type === 2) {
                    this.loading = true
                    this.currentList = row
                    this.title = '修改卡口信息'
                    this.loading = false
                    this.showEdit = true
                    this.ruleForm = {
                        // 给弹出框赋值
                        building: row.building,
                        floor: row.floor,
                        department: row.department,
                        bayonetName: row.bayonetName,
                        bayonetLeader: row.bayonetLeader,
                        phone: row.phone
                    }

                    this.getFloor(row.building, () => {
                        _this.ruleForm.floor = row.floor
                    })
                    this.getDepartment(row.floor, () => {
                        _this.ruleForm.department = row.department
                    })
                } else if (type === 3) {
                    this.$method.messageBox('confirm', '是否修改状态', (action, instance) => {
                        if (action === 'confirm') {
                            _this.$http.post('/bayonetManage/update', {
                                id: row.id,
                                state: row.state
                            }).then(result => {
                                _this.getList()
                            })
                        }
                    }, '', false, false)
                }
            },
            // 提交弹框
            saveDialog() {
                let _this = this
                this.validate('ruleForm', () => {
                    this.submit(function () {
                        _this.closeDialog()
                    })
                })
            },
            // 取消弹框
            closeDialog() {
                this.$refs.ruleForm.resetFields()
                this.ruleForm = {
                    building: null,
                    floor: null,
                    department: null,
                    bayonetName: '',
                    bayonetLeader: '',
                    phone: ''
                }
                // this.floorList = null
                this.currentList = null
                // this.departmentList = null
                this.showEdit = false
            },
            closeCodeDialog() {
                this.currentList = null
                this.showCode = false
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            // 提交
            submit(callback) {
                let form = this.ruleForm
                if (!(this.currentList && this.currentList.id) || null) {
                    // 填写添加信息
                    this.$http.post('/bayonetManage/save', {
                        building: form.building,
                        floor: form.floor,
                        department: form.department,
                        bayonetName: form.bayonetName,
                        bayonetLeader: form.bayonetLeader,
                        phone: form.phone
                    }).then(result => {
                        if (result.success) {
                            this.getList()
                            this.$message.success({
                                message: '添加信息成功',
                                showClose: true
                            })
                            if (callback) callback()
                        }
                    })
                } else {
                    this.$http.post('/bayonetManage/update', {
                        building: form.building,
                        floor: form.floor,
                        department: form.department,
                        id: (this.currentList && this.currentList.id) || null,
                        bayonetName: form.bayonetName,
                        bayonetLeader: form.bayonetLeader,
                        phone: form.phone
                    }).then(result => {
                        if (result.success) {
                            this.getList()
                            this.$message.success({
                                message: '修改信息成功',
                                showClose: true
                            })
                            if (callback) callback()
                        }
                    })
                }
            }
        },
        components: {
            tableExample,
            page,
            dialogMsk,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .code-img {
        width: 250px;
        height: 250px;
        margin: 0 auto;

        .el-image {
            width: 100%;
            height: 100%;
            line-height: 250px;
            text-align: center;

            [class^="el-icon-"], [class*=" el-icon-"] {
                font-size: 50px;
            }
        }
    }
</style>
